<template>
  <div class="contacts-box">
    <div class="title">常用联系人</div>
    <div class="contacts">
      <template v-for="(item, index) in contactsList" :key="item.userId">
        <div class="contacts-li">
          <TjCheckbox
            class="box-checks"
            :checked="item.checked"
            :disabled="item.disabled"
            @change="clickHandler($event, item)"
          >
            <div class="boxs">
              <img v-if="item.avatar" class="avatar" :src="item.avatar" alt="" />
              <img v-else class="avatar" src="@/assets/img/oa-img-default.png" alt="" />
              <TjPopup
                class="placement top center"
                :disabled="item.username.length > 4 ? false : true"
                :content="item.username"
                placement="top"
                :overlay-style="{ maxWidth: '215px' }"
                show-arrow
                destroy-on-close
              >
                <div class="user-name" :class="index === 3 || index === 7 ? 'no-left' : null">
                  {{ item.username }}
                </div></TjPopup
              >
            </div>
          </TjCheckbox>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabMenu'
};
</script>
<script setup>
import {
  defineProps,
  defineEmits,
  inject,
  ref,
  onMounted,
  watch,
  computed,
  provide,
  defineExpose
} from 'vue';
import store from '@/store';
import { TjCheckbox, TjPopup } from 'tj-design-vue';
const options = inject('options');
const contactsList = ref([]); // 常用联系人
// 选中列表
const selectList = inject('selectList');
// 可选择人数
const maxCount = inject('maxCount');
// 是否禁用
const disabled = computed(() => selectList.value.length === maxCount.value);

const mateSelectId = () => {
  contactsList.value.forEach(it => {
    it.disabled = disabled.value;
    it.checked = false;
  });
  // console.log('常用联系人', contactsList.value);
  selectList.value.forEach(item => {
    contactsList.value.forEach(it => {
      if (it.contactsUserId === item.userId) {
        it.checked = true;
        it.disabled = false;
      }
    });
  });
};

const addOrDelSelectHandler = inject('addOrDelSelectHandler'); // 添加或者删除选中人员
const getPeople = inject('getPeople'); // 添加或者删除选中人员 触发子组件事件选中对应的人
onMounted(() => {
  contactsList.value = store.state.user.contactsList;
  // console.log('常用', contactsList.value);
});
const clickHandler = (e, item) => {
  item.checked = e;
  getPeople();
  addOrDelSelectHandler(e, [item], 'userId', 'contacts');
  console.log(e, item);
};
function getChecked() {
  // console.log('常用联系人');
  mateSelectId(); // 匹配选中id
}
defineExpose({
  getChecked
});
</script>

<style lang="less" scoped>
.contacts-box {
  .title {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-400;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
  }
  width: 500px;
  background: #ffffff;
  border: 1px solid rgba(186, 191, 197, 0.4);
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 8px;
  .contacts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .contacts-li {
    margin-top: 8px;
    display: flex;
    align-items: center;
    // width: 234px;
    // height: 38px;
    // padding: 8px;
    // background: #f5f6f7;
    /deep/ .tj-checkbox {
      margin-right: 0px !important;
    }
    img {
      width: 32px;
      height: 32px;
      border-radius: 4px;
      margin-right: 4px;
      margin-left: -4px;
    }
    .user-name {
      width: 58px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-right: 8px;
      // margin-right: 24px;
    }
    .no-left {
      margin-right: 0 !important;
    }
    input {
      width: 16px;
      height: 16px;
      background: #ffffff;
      border: 1px solid rgba(186, 191, 197, 0.4);
      border-radius: 4px;
    }
  }
}
.box-checks {
  display: flex;
  align-items: center;
  .boxs {
    display: flex;
    align-items: center;
  }
}
</style>
